<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>

<head>
	<title>Corporation Corporate Category Bootstrap Responsive Web Template | Codes :: w3layouts</title>
	<!--/tags -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Corporation Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!--//tags -->
	
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/font-awesome.css" rel="stylesheet">
	<!-- //for bootstrap working -->
	
	<link href="//fonts.googleapis.com/css?family=Nunito+Sans:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext,vietnamese" rel="stylesheet">
	<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
		
</head>

<body>
	<!-- header -->
<div class="header">
	<div class="agileits_top_menu">
		<div class="container">
		<div class="w3l_header_left">
				<ul>
					<li><i class="fa fa-phone" aria-hidden="true"></i> +112 223 3345</li>
					<li><i class="fa fa-envelope-o" aria-hidden="true"></i> <a href="mailto:info@example.com">info@example.com</a></li>
					<li><i class="fa fa-map-marker" aria-hidden="true"></i> 3241 USA, New York City</li>
				</ul>
			</div>
			<div class="w3l_header_right">
				<div class="w3ls-social-icons text-left">
					<a class="facebook" href="#"><i class="fa fa-facebook"></i></a>
					<a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
					<a class="pinterest" href="#"><i class="fa fa-pinterest-p"></i></a>
					<a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a>
					<a class="login" href="#" data-toggle="modal" data-target="#myModal1">Login</a>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
		<div class="content white agile-info">
			<nav class="navbar navbar-default" role="navigation">
				<div class="container">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
						<a class="navbar-brand" href="index.html">
							<h1>Corporation</h1>
						</a>
					</div>
					<!--/.navbar-header-->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<nav>
							<ul class="nav navbar-nav">
								<li><a href="index.html">Home</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="gallery.html">Gallery</a></li>
								<li class="dropdown active">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
									<ul class="dropdown-menu">
										<li><a href="codes.html">Short Codes</a></li>
										<li><a href="icons.html">Icons</a></li>
									</ul>
								</li>
								<li><a href="contact.html">Contact</a></li>
							</ul>
						</nav>
					</div>
					<!--/.navbar-collapse-->
					<!--/.navbar-->
				</div>
			</nav>
		</div>
	</div>
<!-- banner -->
<div class="banner">
	<h2>Short Codes </h2>
	<p><a href="index.html">Home »</a> Short Codes </p>
</div>
<!--//banner -->


<!-- typography -->
	<div class="typography">
        <div class="container">
            <div class="wthree_head_section">
                <h3 class="heading">Typography</h3>
            </div>
            <div class="agile_wthree_inner_grids">
                <div class="grid_3 grid_4 w3layouts">
                    <h3 class="hdg">Headings</h3>
                    <div class="bs-example">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td>
                                        <h1 id="h1.-bootstrap-heading">h1. Bootstrap heading<a class="anchorjs-link" href="#h1.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h1>
                                    </td>
                                    <td class="type-info">Semibold 36px</td>
                                </tr>
                                <tr>
                                    <td>
                                        <h2 id="h2.-bootstrap-heading">h2. Bootstrap heading<a class="anchorjs-link" href="#h2.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h2>
                                    </td>
                                    <td class="type-info">Semibold 30px</td>
                                </tr>
                                <tr>
                                    <td>
                                        <h3 id="h3.-bootstrap-heading">h3. Bootstrap heading<a class="anchorjs-link" href="#h3.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h3>
                                    </td>
                                    <td class="type-info">Semibold 24px</td>
                                </tr>
                                <tr>
                                    <td>
                                        <h4 id="h4.-bootstrap-heading">h4. Bootstrap heading<a class="anchorjs-link" href="#h4.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h4>
                                    </td>
                                    <td class="type-info">Semibold 18px</td>
                                </tr>
                                <tr>
                                    <td>
                                        <h5 id="h5.-bootstrap-heading">h5. Bootstrap heading<a class="anchorjs-link" href="#h5.-bootstrap-heading"><span class="anchorjs-icon"></span></a></h5>
                                    </td>
                                    <td class="type-info">Semibold 14px</td>
                                </tr>
                                <tr>
                                    <td>
                                        <h6>h6. Bootstrap heading</h6>
                                    </td>
                                    <td class="type-info">Semibold 12px</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="grid_3 grid_5 w3">
                    <h3>Buttons</h3>
                    <h1>
                        <a href="#"><span class="label label-default">Default</span></a>
                        <a href="#"><span class="label label-primary">Primary</span></a>
                        <a href="#"><span class="label label-success">Success</span></a>
                        <a href="#"><span class="label label-info">Info</span></a>
                        <a href="#"><span class="label label-warning">Warning</span></a>
                        <a href="#"><span class="label label-danger">Danger</span></a>
                    </h1>
                    <h2>
                        <a href="#"><span class="label label-default">Default</span></a>
                        <a href="#"><span class="label label-primary">Primary</span></a>
                        <a href="#"><span class="label label-success">Success</span></a>
                        <a href="#"><span class="label label-info">Info</span></a>
                        <a href="#"><span class="label label-warning">Warning</span></a>
                        <a href="#"><span class="label label-danger">Danger</span></a>
                    </h2>
                    <h3>
                        <a href="#"><span class="label label-default">Default</span></a>
                        <a href="#"><span class="label label-primary">Primary</span></a>
                        <a href="#"><span class="label label-success">Success</span></a>
                        <a href="#"><span class="label label-info">Info</span></a>
                        <a href="#"><span class="label label-warning">Warning</span></a>
                        <a href="#"><span class="label label-danger">Danger</span></a>
                    </h3>
                    <h4>
                        <a href="#"><span class="label label-default">Default</span></a>
                        <a href="#"><span class="label label-primary">Primary</span></a>
                        <a href="#"><span class="label label-success">Success</span></a>
                        <a href="#"><span class="label label-info">Info</span></a>
                        <a href="#"><span class="label label-warning">Warning</span></a>
                        <a href="#"><span class="label label-danger">Danger</span></a>
                    </h4>
                    <h5>
                        <a href="#"><span class="label label-default">Default</span></a>
                        <a href="#"><span class="label label-primary">Primary</span></a>
                        <a href="#"><span class="label label-success">Success</span></a>
                        <a href="#"><span class="label label-info">Info</span></a>
                        <a href="#"><span class="label label-warning">Warning</span></a>
                        <a href="#"><span class="label label-danger">Danger</span></a>
                    </h5>
                    <h6>
                        <a href="#"><span class="label label-default">Default</span></a>
                        <a href="#"><span class="label label-primary">Primary</span></a>
                        <a href="#"><span class="label label-success">Success</span></a>
                        <a href="#"><span class="label label-info">Info</span></a>
                        <a href="#"><span class="label label-warning">Warning</span></a>
                        <a href="#"><span class="label label-danger">Danger</span></a>
                    </h6>
                </div>
                <div class="grid_3 grid_5 w3ls">
                    <h3>Alerts</h3>
                    <div class="alert alert-success" role="alert">
                        <strong>Well done!</strong> You successfully read this important alert message.
                    </div>
                    <div class="alert alert-info" role="alert">
                        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                    </div>
                    <div class="alert alert-warning" role="alert">
                        <strong>Warning!</strong> Best check yo self, you're not looking too good.
                    </div>
                    <div class="alert alert-danger" role="alert">
                        <strong>Oh snap!</strong> Change a few things up and try submitting again.
                    </div>
                </div>
                <div class="grid_3 grid_5 agileits">
                    <h3>Pagination</h3>
                    <div class="col-md-6">
                        <nav>
                            <ul class="pagination pagination-lg">
                                <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                            </ul>
                        </nav>
                        <nav>
                            <ul class="pagination">
                                <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                            </ul>
                        </nav>
                        <nav>
                            <ul class="pagination pagination-sm">
                                <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="col-md-6">
                        <ul class="pagination pagination-lg">
                            <li class="disabled"><a href="#"><i class="fa fa-angle-left">«</i></a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#"><i class="fa fa-angle-right">»</i></a></li>
                        </ul>
                        <nav>
                            <ul class="pagination">
                                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                            </ul>
                        </nav>
                        <ul class="pagination pagination-sm">
                            <li class="disabled"><a href="#"><i class="fa fa-angle-left">«</i></a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#"><i class="fa fa-angle-right">»</i></a></li>
                        </ul>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <div class="grid_3 grid_5 agileinfo">
                    <h3>Breadcrumbs</h3>
                    <ol class="breadcrumb">
                        <li class="active">Home</li>
                    </ol>
                    <ol class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li class="active">Library</li>
                    </ol>
                    <ol class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Library</a></li>
                        <li class="active">Data</li>
                    </ol>
                </div>
                <div class="grid_3 grid_5 wthree">
                    <h3>Badges</h3>
                    <div class="col-md-6 agileits-w3layouts">
                        <p>Add modifier classes to change the appearance of a badge.</p>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Classes</th>
                                    <th>Badges</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>No modifiers</td>
                                    <td><span class="badge">42</span></td>
                                </tr>
                                <tr>
                                    <td><code>.badge-primary</code></td>
                                    <td><span class="badge badge-primary">1</span></td>
                                </tr>
                                <tr>
                                    <td><code>.badge-success</code></td>
                                    <td><span class="badge badge-success">22</span></td>
                                </tr>
                                <tr>
                                    <td><code>.badge-info</code></td>
                                    <td><span class="badge badge-info">30</span></td>
                                </tr>
                                <tr>
                                    <td><code>.badge-warning</code></td>
                                    <td><span class="badge badge-warning">412</span></td>
                                </tr>
                                <tr>
                                    <td><code>.badge-danger</code></td>
                                    <td><span class="badge badge-danger">999</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-6 w3-agileits">
                        <p>Easily highlight new or unread items with the <code>.badge</code> class</p>
                        <div class="list-group list-group-alternate">
                            <a href="#" class="list-group-item"><span class="badge">201</span> <i class="ti ti-email"></i> Inbox </a>
                            <a href="#" class="list-group-item"><span class="badge badge-primary">5021</span> <i class="ti ti-eye"></i> Profile visits </a>
                            <a href="#" class="list-group-item"><span class="badge">14</span> <i class="ti ti-headphone-alt"></i> Call </a>
                            <a href="#" class="list-group-item"><span class="badge">20</span> <i class="ti ti-comments"></i> Messages </a>
                            <a href="#" class="list-group-item"><span class="badge badge-warning">14</span> <i class="ti ti-bookmark"></i> Bookmarks </a>
                            <a href="#" class="list-group-item"><span class="badge badge-danger">30</span> <i class="ti ti-bell"></i> Notifications </a>
                        </div>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <div class="grid_3 grid_5 agile">
                    <h3>Wells</h3>
                    <div class="well">
                        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
                    </div>
                    <div class="well">
                        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                        The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed
                        to using 'Content here
                    </div>
                    <div class="well">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
                        text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
                        a type specimen book. It has survived not only five centuries, but also the leap into electronic
                    </div>
                </div>
                <h3 class="bars">Unordered List</h3>
                <ul class="list-group w3-agile">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
                <h3 class="bars">Ordered List</h3>
                <ol>
                    <li class="list-group-item1">Cras justo odio</li>
                    <li class="list-group-item1">Dapibus ac facilisis in</li>
                    <li class="list-group-item1">Morbi leo risus</li>
                    <li class="list-group-item1">Porta ac consectetur ac</li>
                    <li class="list-group-item1">Vestibulum at eros</li>
                </ol>
                <h3 class="bars">Forms</h3>
                <div class="input-group w3_w3layouts">
                    <span class="input-group-addon" id="basic-addon1">@</span>
                    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
                </div>
                <div class="input-group w3_w3layouts">
                    <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
                    <span class="input-group-addon" id="basic-addon2">@example.com</span>
                </div>
                <div class="input-group w3_w3layouts">
                    <span class="input-group-addon">$</span>
                    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                    <span class="input-group-addon">.00</span>
                </div>
                <div class="input-group input-group-lg w3_w3layouts">
                    <span class="input-group-addon" id="sizing-addon1">@</span>
                    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
                </div>
                <div class="input-group w3_w3layouts">
                    <span class="input-group-addon" id="sizing-addon2">@</span>
                    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
                </div>
                <div class="input-group input-group-sm w3_w3layouts">
                    <span class="input-group-addon" id="sizing-addon3">@</span>
                    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
                </div>
                <div class="row">
                    <div class="col-lg-6 in-gp-tl">
                        <div class="input-group">
                            <span class="input-group-addon">
							<input type="checkbox" aria-label="...">
						</span>
                            <input type="text" class="form-control" aria-label="...">
                        </div>
                        <!-- /input-group -->
                    </div>
                    <!-- /.col-lg-6 -->
                    <div class="col-lg-6 in-gp-tb">
                        <div class="input-group">
                            <span class="input-group-addon">
							<input type="radio" aria-label="...">
						</span>
                            <input type="text" class="form-control" aria-label="...">
                        </div>
                        <!-- /input-group -->
                    </div>
                    <!-- /.col-lg-6 -->
                </div>
                <!-- /.row -->
                <div class="row">
                    <div class="col-lg-6 in-gp-tl">
                        <div class="input-group">
                            <span class="input-group-btn">
							<button class="btn btn-default" type="button">Go!</button>
						</span>
                            <input type="text" class="form-control" placeholder="Search for...">
                        </div>
                        <!-- /input-group -->
                    </div>
                    <!-- /.col-lg-6 -->
                    <div class="col-lg-6 in-gp-tb">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for...">
                            <span class="input-group-btn">
							<button class="btn btn-default" type="button">Go!</button>
						</span>
                        </div>
                        <!-- /input-group -->
                    </div>
                    <!-- /.col-lg-6 -->
                </div>
                <!-- /.row -->
                <div class="row">
                    <div class="col-lg-6 in-gp-tl">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="fa fa-caret-down"></span></button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <!-- /btn-group -->
                            <input type="text" class="form-control" aria-label="...">
                        </div>
                        <!-- /input-group -->
                    </div>
                    <!-- /.col-lg-6 -->
                    <div class="col-lg-6 in-gp-tb">
                        <div class="input-group">
                            <input type="text" class="form-control" aria-label="...">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="fa fa-caret-down"></span></button>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div>
                            <!-- /btn-group -->
                        </div>
                        <!-- /input-group -->
                    </div>
                    <!-- /.col-lg-6 -->
                </div>
                <!-- /.row -->
                <div class="page-header">
                    <h3 class="bars">Tables</h3>
                </div>
                <h2 class="typoh2">Default styles</h2>
                <p>For basic stylinglight padding and only horizontal add the base class <code>.table</code> to any <code>&lt;table&gt;</code>.</p>
                <div class="bs-docs-example">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <hr class="bs-docs-separator">
                <p>Add any of the following classes to the <code>.table</code> base class.</p>
                <p>Adds zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code>                    CSS selector (not available in IE7-8).</p>
                <div class="bs-docs-example">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p>Add borders and rounded corners to the table.</p>
                <div class="bs-docs-example">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td rowspan="2">1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@getbootstrap</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td colspan="2">Larry the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
                <div class="bs-docs-example">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td colspan="2">Larry the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
	<!-- //typography -->

	
<!-- /newsletter-->
	<div class="newsletter_w3layouts_agile">
		<div class="col-sm-6 newsleft">
			<h3>Sign up for Newsletter !</h3>
		</div>
		<div class="col-sm-6 newsright">
			<form action="#" method="post">
				<input type="email" placeholder="Enter your email..." name="email" required="">
				<input type="submit" value="Submit">
			</form>
		</div>

		<div class="clearfix"></div>
	</div>
<!-- //newsletter-->

<!-- footer -->
<div class="footer_top_agileits">
	<div class="container-fluid">
		<div class="col-md-3 footer_grid">
			<h3>About Us</h3>
			<p>Sagittis quis turpis vel, facilisis posuere erat. Nulla facilisi. Proin vel commodo leo. Ut mauris tortor, cursus ut massa vitae, iaculis vehicula turpis. Nam libero tempore cum vulputate id posuere erat.</p>
			<div class="read">
				<a href="about.html">Read more »</a>
			</div>
		</div>
		<div class="col-md-3 footer_grid">
			<h3>Latest News</h3>
			<ul class="footer_grid_list">
				<li><i class="fa fa-chevron-right" aria-hidden="true"></i>
					<a href="#" data-toggle="modal" data-target="#myModal">Lorem ipsum neque vulputate </a>
				</li>
				<li><i class="fa fa-chevron-right" aria-hidden="true"></i>
					<a href="#" data-toggle="modal" data-target="#myModal">Dolor amet sed quam vitae</a>
				</li>
				<li><i class="fa fa-chevron-right" aria-hidden="true"></i>
					<a href="#" data-toggle="modal" data-target="#myModal">Lorem ipsum neque, vulputate </a>
				</li>
				<li><i class="fa fa-chevron-right" aria-hidden="true"></i>
					<a href="#" data-toggle="modal" data-target="#myModal">Dolor amet sed quam vitae</a>
				</li>
				<li><i class="fa fa-chevron-right" aria-hidden="true"></i>
					<a href="#" data-toggle="modal" data-target="#myModal">Lorem ipsum neque, vulputate </a>
				</li>
			</ul>
		</div>
		<div class="col-md-3 footer_grid">
			<h3>Contact Info</h3>
			<ul class="address">
				<li><i class="fa fa-map-marker" aria-hidden="true"></i>3241 USA, Collection building, <span>New York City.</span></li>
				<li><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:info@example.com">info@example.com</a></li>
				<li><i class="fa fa-phone" aria-hidden="true"></i>+0123 2279 3241</li>
				<li><i class="fa fa-globe" aria-hidden="true"></i><a href="#">info@website.com</a></li>
			</ul>
		</div>
		<div class="col-md-3 footer-grid_agileits_w3 footer_grid">
				<h3>Recent Works</h3>
			<div class="footer-list">
				<div class="flickr-grid">
					<a href="#"><img src="images/p1.jpg" alt=" " ></a>
				</div>
				<div class="flickr-grid">
					<a href="#"><img src="images/p2.jpg" alt=" "></a>
				</div>
				<div class="flickr-grid">
					<a href="#"><img src="images/p3.jpg" alt=" " ></a>
				</div>
				<div class="flickr-grid">
					<a href="#"><img src="images/p4.jpg" alt=" "></a>
				</div>
				<div class="flickr-grid">
					<a href="#"><img src="images/p5.jpg" alt=" "></a>
				</div>
				<div class="flickr-grid">
					<a href="#"><img src="images/p6.jpg" alt=" "></a>
				</div>
				<div class="flickr-grid">
					<a href="#"><img src="images/p1.jpg" alt=" "></a>
				</div>
				<div class="flickr-grid">
					<a href="#"><img src="images/p2.jpg" alt=" "></a>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="clearfix"> </div>
	</div>
</div>
<div class="footer_w3ls">
	<div class="container">
				<div class="footer_bottom1">
					<p>© 2018 Corporation. All rights reserved | Design by <a href="http://w3layouts.com">W3layouts</a></p>
				</div>
	</div>
</div>
<!-- //footer -->


	<!-- signin Model -->
	<!-- Modal1 -->
	<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body modal-body-sub_agile">
					<div class="main-mailposi">
						<span class="fa fa-envelope-o" aria-hidden="true"></span>
					</div>
					<div class="modal_body_left modal_body_left1">
						<h3 class="agileinfo_sign">LogIn To Your Account</h3>
						<form action="#" method="post">
							<div class="styled-input agile-styled-input-top">
								<input type="text" placeholder="User Name" name="Name" required="">
							</div>
							<div class="styled-input">
								<input type="password" placeholder="Password" name="password" required="">
							</div>
							<input type="submit" value="Sign In">
						</form>
						<div class="clearfix"></div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<!-- //Modal content-->
		</div>
	</div>
	<!-- //Modal1 -->
	<!-- //signin Model -->

	
	
	<!-- js -->
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

	<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
	
	<!-- stats -->
	<script src="js/jquery.waypoints.min.js"></script>
	<script src="js/jquery.countup.js"></script>
	<script>
		$('.counter').countUp();
	</script>
	<!-- //stats -->

	<!-- owl carousel -->
	<script src="js/owl.carousel.js"></script>
	<script>
		$(document).ready(function () {
			$("#owl-demo").owlCarousel({

				autoPlay: 3000, //Set AutoPlay to 3 seconds
				autoPlay: true,
				items: 3,
				itemsDesktop: [991, 2],
				itemsDesktopSmall: [414, 4]

			});
		}); 
	</script>
	<!-- //owl carousel -->
<script src="js/responsiveslides.min.js"></script>
	<script>
		$(function () {
			$("#slider4").responsiveSlides({
				auto: true,
				pager: true,
				nav: true,
				speed: 1000,
				namespace: "callbacks",
				before: function () {
					$('.events').append("<li>before event fired.</li>");
				},
				after: function () {
					$('.events').append("<li>after event fired.</li>");
				}
			});
		});
	</script>

<!-- Flex slider-script -->
	<script defer src="js/jquery.flexslider.js"></script>
		<script type="text/javascript">
		
		$(window).load(function(){
		  $('.flexslider').flexslider({
			animation: "slide",
			start: function(slider){
			  $('body').removeClass('loading');
			}
		  });
		});
	  </script>
<!-- //Flex slider-script -->
<!-- start-smooth-scrolling -->
	<script src="js/move-top.js"></script>
	<script src="js/easing.js"></script>
	<script>
		jQuery(document).ready(function ($) {
			$(".scroll").click(function (event) {
				event.preventDefault();

				$('html,body').animate({
					scrollTop: $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<!-- //end-smooth-scrolling -->
	<!-- smooth-scrolling-of-move-up -->
	<script>
		$(document).ready(function () {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			*/

			$().UItoTop({
				easingType: 'easeOutQuart'
			});

		});
	</script>
	<!-- //smooth-scrolling-of-move-up -->
	
	<!-- smooth scrolling js -->
	<script src="js/SmoothScroll.min.js"></script>
	<!-- //smooth scrolling js -->

</body>
</html>